<!-- 交易页面 -->
<template>
	<view>
		<view class="overall">
			<!-- 菜单部分 start -->
			<view class="Information">
				<view class="top">
					<view>
						<image src="../../static/trade-icon/jy_icon01.png" mode=""></image>
						<text>买入</text>
					</view>
					<view>
						<image src="../../static/trade-icon/jy_icon02.png" mode=""></image>
						<text>卖出</text>
					</view>
					<view>
						<image src="../../static/trade-icon/jy_icon03.png" mode=""></image>
						<text>撤单</text>
					</view>
					<view>
						<image src="../../static/trade-icon/jy_icon04.png" mode=""></image>
						<text>持仓</text>
					</view>
				</view>
				<view class="bottom">
					<view>
						<image src="../../static/trade-icon/jy_icon05.png" mode=""></image>
						<text>当日委托</text>
					</view>
					<view>
						<image src="../../static/trade-icon/jy_icon06.png" mode=""></image>
						<text>当日成交</text>
					</view>
					<view>
						<image src="../../static/trade-icon/jy_icon07.png" mode=""></image>
						<text>申请配资</text>
					</view>
					<view>
						<image src="../../static/trade-icon/jy_icon08.png" mode=""></image>
						<text>咨询</text>
					</view>
				</view>
			</view>
			<!-- 菜单部分 end -->
			<!-- 持仓部分 start -->
			<view class="warehouse">
				<view class="h5">
					持仓
				</view>
				<view class="statistics">
					<view class="dl">
						<text>今日</text>
						<text style="color: #ed1e28;">0.00</text>
					</view>
					<view class="dl">
						<text>持仓收益</text>
						<text style="color: #ed1e28;">0.00</text>
					</view>
					<view class="dl">
						<text>总市值</text>
						<text style="color: #343434;">0.00</text>
					</view>
					<view class="dl">
						<text>杠杆</text>
						<text style="color: #343434;">10</text>
					</view>
					<view class="dl">
						<text>警戒线</text>
						<text style="color: #ea8604;">50%</text>
					</view>
					<view class="dl">
						<text>平仓线</text>
						<text style="color: #ed1e28;">70%</text>
					</view>
				</view>
			</view>
			<!-- 持仓部分 end -->
			<view class="back">
				<view class="rebate">
					<view class="rebate-icon">
						
					</view>
					<view class="rebate-p">
						没有发现相关的信息哟~～
					</view>
				</view>
			</view>
			<view class="hr">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.hr{
		width: 100%;
		height: .625rem;
		background-color: white;
	}
	.overall {
		width: 100%;
		background: url("../../static/mine-icon/money_bg1.png") no-repeat;
		background-size: 100% 8.5rem;
		overflow: hidden;
	}
	/* 菜单部分样式 start */
	.Information{
		width: 93.6%;
		height: 12.6875rem;
		margin: 0rem auto;
		margin-top: 3.2rem;
		background-color: #fcf8f5 !important;
		border-radius: 0.4rem;
		box-shadow: 0px 0px 5px 2px #ddd;
	}
	.top{
		width: 100%;
		height: 6.875rem;
		display: flex;
		justify-content: space-between;
	}
	.bottom{
		width: 100%;
		height: 5.5rem;
		display: flex;
		justify-content: space-between;
	}
	.top image{
		width: 3rem;
		height: 3rem;
	}
	.top>view{
		width: 25%;
		height: 100%;
		font-size: 0.88rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem 0rem;
		box-sizing: border-box;
	}
	.bottom image{
		width: 1.625rem;
		height: 1.625rem;
	}
	.bottom>view{
		width: 25%;
		height: 100%;
		font-size: 0.88rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem 0rem;
		box-sizing: border-box;
		margin-top: 0.3125rem;
	}
	/* 菜单部分样式 end */
	/* 持仓部分样式  start*/
	.warehouse{
		width: 100%;
		height: 12.5rem;
		padding-left: 0.75rem;
		padding-top: 0.75rem;
		padding-right: 0.75rem;
		box-sizing: border-box;
	}
	.h5{
		width: 100%;
		height: 2.125rem;
		margin-top: 0.875rem;
		padding: 0.3125rem 0.625rem;
		box-sizing: border-box;
	}
	.statistics{
		width: 100%;
		height: 8.34375rem;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.dl{
		width: 7.3125rem;
		height: 50%;
		display: flex;
		padding-left: 0.625rem;
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}
	.dl text:nth-child(1){
		font-size: 0.6rem !important;
		color: #b3b3b3 !important;
	}
	.dl text:nth-child(2){
		font-size: 1.2rem !important;
	}
	/* 持仓部分样式  end*/
	.back{
		width: 100%;
		height: 13.4375rem;
		background-color: #f2f2f2;
		overflow: hidden;
	}
	.rebate{
		width: 21.9375rem;
		height: 14.125rem;
		margin: 0rem auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-top-left-radius: .5rem;
		border-top-right-radius: .5rem;
	}
	.rebate-icon{
		width: 9rem;
		height: 10rem;
		background: url("../../static/mine-icon/nodata_search.png") no-repeat;
		background-size: 100%;
		background-position-y: .5rem;
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		font-size: .86rem;
	}
	.rebate-p{
		color: #999999 !important;
		font-size: 0.6rem !important;
		margin-top: .5rem;
	}
</style>
